Chakra UIを利用してカスタムコンポーネントを作ってみた

Chakra UIを利用してカスタムコンポーネントを作ってみた

Clock Icon2022.12.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは!DA(データアナリティクス)事業本部 サービスソリューション部の大高です。

Chakra UIにはReactで利用できる様々なUIコンポーネントが用意されていますが、既存のコンポーネントを少しカスタマイズしたり、利用方法に制約を加えたいことがあります。

実際に、Buttonコンポーネントをカスタマイズしたものを作成してみたので、対応方法についてまとめたいと思います。

単純にラップする

まずは単純にラップしたコンポーネントを作成してみます。

以下の公式ドキュメントを参考に対応をしていきましょう。

今回は「既存のButtonコンポーネントをカスタマイズしたものを作成したい」という点と、Buttonにrefが指定される可能性を考慮して、ドキュメントに記載のOption 1を参考に作成します。

import {
  Button as ChakraButton,
  ButtonProps as ChakraButtonProps,
  forwardRef,
} from '@chakra-ui/react'

export type ButtonProps = ChakraButtonProps
export const Button = forwardRef<ButtonProps, 'button'>((props, ref) => {
  return (
    <ChakraButton {...props} ref={ref}></ChakraButton>
  )
})

これは、ドキュメントとほぼ同じ感じですね。

スタイルを限定する

次に、更にスタイルを限定したボタンを作成してみます。

PrimaryButtonというコンポーネントとして、colorSchemevariantを限定(外部からは変更不可)なコンポーネントとしてみます。

export type PrimaryButtonProps = Omit<ButtonProps, keyof Pick<ButtonProps, 'colorScheme' | 'variant'>>
export const PrimaryButton = forwardRef<PrimaryButtonProps, 'button'>((props, ref) => {
  return (
    <Button {...props} colorScheme={'blue'} variant={'solid'} ref={ref}></Button>
  )
})

まずはPrimaryButtonPropsを定義します。ここではOmitを利用して、既存のButtonPropsからcolorSchemevariantを除去します。

次に、このPrimaryButtonPropsを利用してPrimaryButtonを定義することで、colorSchemevariantはプロパティとして指定できないコンポーネントとしました。

このButtonコンポーネントのスタイルはcolorScheme={'blue'} variant={'solid'}と明示的にプロパティ指定をしており、これによりスタイルが限定されています。

まとめ

以上、Chakra UIを利用して独自コンポーネントを作ってみました。

Chakra UIでは比較的簡単にコンポーネントの拡張や作成ができるので、共通利用したいコンポーネントがある場合には独自コンポーネントを作成することで効率化できるかなと思います。

どなたかのお役に立てば幸いです。それでは!

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.